<template>
  <div id="drawer-target">
    <n-card>
      <!-- 搜索 -->
      <HeadSearch :info="search" @search="handleSearch" @reset="handleSearch" />

      <!-- 表格 -->
      <DataTable
        ref="tableRef"
        :columns="columns"
        :row-key="(row) => row.id"
        :request="loadDataTable"
        size="large"
        :pagination-setting="pagination"
      />
    </n-card>
  </div>

  <!-- 新增、编辑弹窗 -->
  <OrderModal v-if="modalShow" v-model:visible="modalShow" :data="rowData" @reload="handleSearch" />

  <!-- 工单处理 - 工单详情 -->
  <n-drawer v-model:show="questionDraw" :width="'calc(100% - 2px)'" :placement="'right'" resizabl to="#drawer-target">
    <n-drawer-content :title="drawTitle" closable>
      <order-detail :detail="rowData" :type="questionType" />
    </n-drawer-content>
  </n-drawer>

</template>

<script>
import { toRefs, reactive, unref, onUnmounted } from 'vue'
import { useUserStore } from '@/store/modules/user'
import HeadSearch from '@/components/Search/index.vue'
import DataTable from '@/components/DataTable/index.vue'
import OrderModal from './components/OrderModal.vue'
import table from './tools/table'
import { search, getDeptInfo } from './tools/search'
import pagination from './tools/pagination'
import { getOrderList } from '@/api/order-work/index'
import { ORDER_STATUS } from '@/utils/dictionary'
import { arrToObj } from '@/utils/handleData'
import orderDetail from '../order-detail/index.vue'

export default {
  name: 'TaskAll',
  components: { HeadSearch, DataTable, OrderModal, orderDetail },
  setup() {
    const roleType = useUserStore().userInfo.type // 1：超级管理员， 2：管理员， 3：普通用户
    const roleDeptId = useUserStore().userInfo.deptId // 该角色的部门id
    getDeptInfo(roleDeptId)

    const data = reactive({
      ...toRefs(table),
      ...toRefs(search)
    })
    data.getRoleHandle()

    // 请求接口
    const loadDataTable = async(res) => {
      const _params = {
        ...unref(data.searchParams),
        ...res
      }

      const temp = await getOrderList(_params)
      // 拼接
      temp.data.records = temp.data.records.map(it => ({
        ...it,
        questionNum: `${it.processedProblemCount || 0}/${it.problemTotalCount || 0}`,
        statusName: arrToObj(ORDER_STATUS, 'value', 'label')[it.status]
      }))
      return temp
    }

    onUnmounted(() => {
      data.searchParams = null
      data.questionDraw = false
    })

    return {
      ...toRefs(data),
      loadDataTable,
      pagination,
      roleType
    }
  }
}
</script>

<style>
.drawer-target {
  position: relative;
  width: 100%;
  height: 300px;
  border: 1px solid rgba(128, 128, 128, 0.2);
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
</style>
